<template>
	<view class="login">
		<view class="login-title">
			<label>欢迎使用&nbsp;WELCOME</label>
			<!-- <label>青岛市民中心</label> -->
			<label>设备检测系统</label>
		</view>
		<view class="login-form">
			<label class="login-form__title">登&nbsp;录</label>
			<InputComp title="账号" v-model:value="userName" titlePosition="left" style="margin-top: 70rpx;"
				placeholder="用户名" />
			<InputComp title="密码" v-model:value="pwd" type="password" titlePosition="left" placeholder="密码" />
			<InputComp title="验证码" v-model:value="captcha" titlePosition="left" placeholder="验证码" />
			<image :src="zCode" alt="" class="captcha-img"></image>
			<button @tap="toLogin">登录</button>
			<view class="remenber">
				<checkbox-group @change="changeFn">
					<checkbox value="remenber" :checked="remenber" color="#5970FA" style="transform:scale(0.7)" /><label
						@tap="clickFn">记住密码</label>
				</checkbox-group>
			</view>

		</view>
		<!--#ifdef APP-PLUS-->
		<view class="login-version">v{{version}}</view>
		<!--#endif-->
	</view>
</template>

<script setup>
	import {
		ref,
		toRefs,
		computed,
		onMounted
	} from "vue"
	import InputComp from "@/components/input/input.vue"
	import {
		loginBySocial,
		getDeptDetail
	} from "@/api/index.js"
	import {
		checkVersion
	} from "@/utils/checkVersion.js"
	import {
		onShow
	} from '@dcloudio/uni-app';
	import {
		getCode,
		getToken
	} from "@/common/dd.js";
	import {
		getCodeData,
		login,
		getInfo
	} from '@/api/deviceTest.js';
	import md5 from 'js-md5'
	const pwd = ref('')
	const remenber = ref(false)
	const userName = ref('')
	const captcha = ref('')
	//#ifdef APP-PLUS
	const version = computed(() => uni && uni.getAppBaseInfo().appVersion)
	//#endif
	const clickFn = (val) => {
		remenber.value = !remenber.value; //console.log('change===', val.detail.value)
	}
	const changeFn = (val) => {
		remenber.value = val.detail.value.length > 0;
	}

	const uuidString = ref('')
	const zCode = ref('')
	//获取登录验证码
	const getDataInit = () => {
		getCodeData().then(res => {
			uuidString.value = res.uuid;
			zCode.value = 'data:image/gif;base64,' + res.img.replace(/[\r\n]/g, "")
		})
	}
	//登录
	const toLogin = () => {
		uni.showToast({
			icon: 'none',
			title: "1"
		})
		if (!userName.value) {
			uni.showToast({
				icon: 'none',
				title: "请先输入用户名"
			})
			return;
		}
		if (!pwd.value) {
			uni.showToast({
				icon: 'none',
				title: "请先输入密码"
			})
			return;
		}
		if (!captcha.value) {
			uni.showToast({
				icon: 'none',
				title: "请先输入验证码"
			})
			return;
		}
		if (remenber.value) {
			uni && uni.setStorageSync('loginInfo', {
				userName: userName.value,
				pwd: pwd.value
			});
		} else {
			uni && uni.setStorageSync('loginInfo', {
				userName: userName.value,
				pwd: ''
			});
		}
		uni.showLoading({
			title: '加载中',
			mask: true
		})
		login({
			username: userName.value,
			password: pwd.value,
			code: captcha.value,
			uuid: uuidString.value
		}).then(res => {
			uni.hideLoading()
			console.log("rrerrer", res);
			if (res.code == 200) {
				uni.setStorageSync('token', res.data.access_token);
				//console.log("3333333",uni.getStorageSync('token'));
				// 	uni.setStorageSync('userInfo', res);
				getInfo().then(res1 => {
					//console.log("rrrrrr",res1);
					uni.setStorageSync('permissions', res1.permissions || {});
					uni.setStorageSync('roles', res1.roles || []);
					uni.setStorageSync('user', res1.user || {});
					// const url = res.role_name === "director" ? '/pages/index1/index' :  '/pages/index/index'
					const url = '/pages/index2/index'
					setTimeout(function() {
						uni.reLaunch({
							url: url
						})
					}, 1000)
				})
				uni.showToast({
					icon: 'none',
					title: `欢迎您，登录成功`
				});

			} else {
				//console.log("2222")
				uni.showToast({
					icon: 'none',
					title: res.msg
				});
				return;
			}
		})

	}
	//#ifdef APP-PLUS

	setTimeout(() => {
		checkVersion()
	}, 1000)

	//#endif
	onShow(() => {
		const loginInfo = uni.getStorageSync('loginInfo')
		userName.value = loginInfo.userName;
		pwd.value = loginInfo.pwd;
		console.log('getToken1========')
		// alert(`location===${window.location.href}`)
		getCode();
	})

	onMounted(() => {
		//获取图形验证码
		getDataInit();
	})
</script>


<style lang="scss" scoped>
	.login-version {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		text-align: center;
		padding: 20rpx;
	}

	.login {
		height: 100vh;
		width: 100%;
		box-sizing: border-box;
		padding-top: 20%; //250rpx;
		background: url(@/static/login_bg.jpg) no-repeat left top;
		background-size: 100% 100%;
	}

	.login-title {
		display: flex;
		flex-direction: column;
		margin-bottom: 100rpx;
		margin-left: 64rpx;

		label {
			font-size: 40rpx;
			color: #fff;
			text-shadow: 0px 5px 10px #000000;
			padding-bottom: 10rpx;
			font-weight: bold;
			font-family: Source Han Sans CN;
			letter-spacing: 4rpx;

			&:nth-of-type(1) {
				font-size: 36rpx;
				padding-bottom: 45rpx;
			}
		}

	}

	.login-form {
		margin: 0 55rpx;
		background: #fff;
		border-radius: 30rpx;
		padding: 68rpx 46rpx;
		text-align: center;

		.login-form__title {
			font-size: 48rpx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #455BDF;
			line-height: 32rpx;
			margin-bottom: 70rpx;
		}

		:deep(.inputer) {
			margin-bottom: 40rpx;
		}

		button {
			background: linear-gradient(0deg, #455BDF 0%, #5970FA 100%);
			border-radius: 10rpx;
			height: 90rpx;
			line-height: 90rpx;
			color: #fff;
			font-size: 30rpx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			letter-spacing: 10rpx;
			margin-top: 70rpx;
		}

		.remenber {
			display: flex;
			justify-content: flex-end;
			font-size: 28rpx;
			margin-top: 20rpx;
			align-items: center;
			cursor: pointer;
		}
	}

	uni-page-body {
		height: 100%;
	}

	.captcha-img {
		width: 300rpx;
		height: 60rpx;
		//background-color: red;
		//margin-left: 10rpx;
	}
</style>